import React from 'react'
import { DetailWrapper, Header, Content } from './style'
import { connect } from 'react-redux'
import { actionCreators } from './store'
import { withRouter } from 'react-router-dom'
class Detail extends React.PureComponent {
  componentDidMount () {
    console.log('url参数是', this.props.match.params.id)
    setTimeout(() => {
      this.props.getDetail(this.props.match.params.id)
    }, 5000)
  }
  render () {
    const {title, detail} = this.props
    return (
      <DetailWrapper>
        <Header>{ title }</Header>
        <Content dangerouslySetInnerHTML={{ __html: detail}} />
      </DetailWrapper>
    )
  }
}
const mapStateToProps = (state) => ({
  title: state.getIn(['detail', 'title']),
  detail: state.getIn(['detail', 'detail'])
})

const mapDispatchToProps = (dispatch) => ({
  getDetail (id) {
    dispatch(actionCreators.setDetail(id))
  }
})

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail))